<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		* {
			padding: 0;
			margin: 0;
		}
		.login-dialog {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
			font-size: 16px;
		}
		.login-dialog-panel {
			position: relative;
			width: 400px;
			height: 250px;
			background: #fff;
			margin: 170px auto;

		}
		.login-dialog-panel>div {
			width: 80%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			-moz-transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
			-ms-transform: translate(-50%,-50%);
			-o-transform: translate(-50%,-50%);
		}
		.yan-code{
			margin-top: 20px;
		}
		.yan-code input {
			width: 100px;
			height: 20px;
			padding: 5px;
			border: 1px solid #b3afaf;
		}
		.yan-login-btn {
			margin-top: 40px;
			text-align: center;
		}
		.yan-login-btn button:hover {
			cursor: pointer;
		}
		.yan-login-btn button {
			width: 100%;
			height: 40px;
			background: #0ae;
			color: #fff;
			border: 0;
			border-radius: 4px;
		}
	</style>
</head>
<body>
	<div class="login-dialog">
		<div class="login-dialog-panel">
			<div>
				<p>已向手机号<span>13057581920</span>发送验证码</p>
				<div class="yan-code">
					<label>请输入验证码: </label><input type="" >
				</div>
				<div class="yan-login-btn">
					<button type="">验证登录</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>